<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="add(null)" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域 -->
    <div>

      <s-table
        ref="table"
        rowKey="id"
        :showPagination="false"
        :columns="columns"
        :data="loadData"
      >
        <span slot="action" slot-scope="text, record">

          <template v-if="!record.parentName && !record.parentSerialNo">
            <a @click="add(record)">添加子项</a>
            <a-divider type="vertical"/>
          </template>

          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => del(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
    </div>

    <variety-modal ref="modal" @ok="refreshTable"></variety-modal>

  </a-card>
</template>

<script>
import { STable } from '@/components'
import { apiQueryCommodityVarietyTree, apiDelCommodityVariety } from '@/api/commodity'
import VarietyModal from './modules/VarietyModal'

const columns = [
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '分类编码',
    dataIndex: 'serialNo',
    key: 'serialNo'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 200
  }
]

export default {
  name: 'VarietyList',
  components: {
    STable, VarietyModal
  },
  data () {
    return {
      columns,
      queryParam: {},
      loadData: param => {
        return apiQueryCommodityVarietyTree(Object.assign(param, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    add (record) {
      this.$refs.modal.show('新增', null, record)
    },
    edit (record) {
      this.$refs.modal.show('新增', record)
    },
    refreshTable () {
      this.$refs.table.refresh(true)
    },
    del (id) {
      apiDelCommodityVariety(id).then(res => {
        this.$message.success(res.msg)
      }).finally(() => {
        this.refreshTable()
      })
    }
  }
}
</script>

<style scoped>

</style>
